<template>
  <div class="mac-card">
    <!-- 顶部标题栏 -->
    <div class="title-bar">
      <div class="window-controls">
        <div class="dot red"></div>
        <div class="dot yellow"></div>
        <div class="dot green"></div>
      </div>
      <div class="title">{{ title }}</div>
    </div>

    <!-- 内容区域 -->
    <div :class="['content', `content-${state}`]">
      <slot>
        <!-- 默认内容 -->
        <div v-if="state === 'default'">{{ content }}</div>
        <div v-else-if="state === 'markdown'" v-html="content"></div>
        <pre v-else-if="state === 'code'"><code>{{ content }}</code></pre>
      </slot>
    </div>
  </div>
</template>

<script setup>

defineProps({
  title: {
    type: String,
    default: 'Default '
  },
  content: {
    type: String,
    default: 'Default'
  },
  state: {
    type: String,
    default: 'Default' // default, markdown, code
  }
});
</script>

<style scoped>
.mac-card {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 16px;
}

.title-bar {
  display: flex;
  align-items: center;
  padding: var(--space);
  border-bottom: 1px solid var(--border);
  background: var(--border);
}

.window-controls {
  display: flex;
  gap: 6px;
  margin-right: 10px;
}


.content {
  padding: var(--space);
}

.content-code {
  background: #f6f8fa;
  font-family: monospace;
}

.content-code pre {
  margin: 0;
  white-space: pre-wrap;
}

.content-markdown {
  line-height: 1.6;
}

.dot {
  width: var(--space);
  height: var(--space);
  border-radius: 50%;
  border: 1px solid #777;
  border: none;
}

.red {
  background-color: #ff5f56;
  border-color: #cc4944;
}

.yellow {
  background-color: #ffbd2e;
  border-color: #cca727;
}

.green {
  background-color: #27c93f;
  border-color: #1e9931;
}
</style>